import {
  Component,
  Injector,
  ElementRef,
  ViewChild,
  OnInit,
  AfterViewInit,
} from "@angular/core";
import { appModuleAnimation } from "@shared/animations/routerTransition";
import { AppComponentBase } from "@shared/common/app-component-base";
import * as echarts from "echarts";
import Swiper from "swiper";
import {
  DemoThreeServiceProxy,
  PriceListDto,
  MaterialCostDto,
  TeamIncomeDto,
  TeamCountDto,
  ModelTimeDto,
  OperatingDto,
} from "@shared/service-proxies/service-proxies";
@Component({
  templateUrl: "./demo3.component.html",
  styleUrls: ["./demo3.component.less"],
  animations: [appModuleAnimation()],
})
export class Demo3Component extends AppComponentBase implements AfterViewInit {
  @ViewChild("DatePicker") datePicker: ElementRef;
  saving = false;
  num = 0;
  constructor(
    injector: Injector,
    private _demoThreeService: DemoThreeServiceProxy
  ) {
    super(injector);
  }

  getTime = new Date();
  es: any;
  isshow = false;
  yearNum: number;
  monthNum: number;
  priceListDto: any = [];

  materialCostDto: MaterialCostDto;
  arrWarehousing = [];
  arrDelivery = [];
  arrInventory = [];
  totalWarehousing: number;
  totalDelivery: number;
  totalInventory: number;

  totalRevenue: number;
  arrModel = [];

  teamIncomeDto: TeamIncomeDto;
  teamCountDto: TeamCountDto;
  modelTimeDto: ModelTimeDto;
  operatingDto: OperatingDto;
  modelCode: any;
  modelTime: any;
  legend: any;
  month: any;
  operating: any;
  profit: any;
  teamList: any;
  differ: any;
  income: any;
  modelName: any;
  modelCount: any;
  ngOnInit(): void {
    this.getTime.setMonth(this.getTime.getMonth() - 1);
    this.yearNum = this.getTime.getFullYear(); //获取完整的年份(4位,1970-????)
    this.monthNum = this.getTime.getMonth() + 1; //获取当前月份(0-11,0代表1月)
  }
  ngAfterViewInit() {
    this.toptime();
    this.getListData();
    this.getMaterialCost();
    this.getTotalRevenue();
    this.clear();

    // 基于准备好的dom，初始化echarts实例
    this._demoThreeService
      .getModelTime(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.modelTimeDto = result;
        this.modelCode = this.modelTimeDto.modelCode;
        this.modelTime = this.modelTimeDto.modelTime;
        this.rightbottomleft();
      });

    this.rightbottomright();
    this._demoThreeService
      .getTotalPrice(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.arrModel = result;
        this.centerleft();
      });
    this._demoThreeService
      .getOperatingProfit(this.yearNum)
      .subscribe((result) => {
        this.operatingDto = result;
        this.legend = this.operatingDto.legend;
        this.month = this.operatingDto.month;
        this.operating = this.operatingDto.operating;
        this.profit = this.operatingDto.profit;
        this.conterbottom();
      });
    this.centercenter();
    this.centerright();

    this._demoThreeService
      .getTeamIncome(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.teamIncomeDto = result;
        this.teamList = this.teamIncomeDto.teamList;
        this.differ = this.teamIncomeDto.differ;
        this.income = this.teamIncomeDto.income;
        this.leftbottomleft();
      });
    this.leftNews();
    this._demoThreeService
      .getTeamCount(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.teamCountDto = result;
        this.modelName = this.teamCountDto.modelName;
        this.modelCount = this.teamCountDto.modelCount;
        this.leftbottomright();
      });
  }
  init() {
    this.yearNum = this.getTime.getFullYear(); //获取完整的年份(4位,1970-????)
    this.monthNum = this.getTime.getMonth() + 1; //获取当前月份(0-11,0代表1月)
    this.ngAfterViewInit();
  }
  clearArr: any = [];
  clear() {
    // clearInterval(this.zb1Clear);
    // clearInterval(this.zb2Clear);
    // clearInterval(this.zb3Clear);
    this.clearArr.forEach((element) => {
      clearInterval(element);
    });
  }

  toptime() {
    setInterval(function () {
      var myDate = new Date();
      var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      var myToday = myDate.getDate(); //获取当前日(1-31)
      var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
      var myHour = myDate.getHours(); //获取当前小时数(0-23)
      var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
      var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
      var week = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      var nowTime;

      nowTime =
        myYear +
        "-" +
        myMonth +
        "-" +
        myToday +
        "&nbsp;&nbsp;" +
        myHour +
        ":" +
        myMinute +
        ":" +
        mySecond +
        "&nbsp;&nbsp;" +
        week[myDay] +
        "&nbsp;&nbsp;";
      //console.log(nowTime);
      $("#time").html(nowTime);
    }, 1000);
  }
  getListData() {
    this._demoThreeService
      .getListData(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.priceListDto = result;
        // .map((el)=>{
        //   return {taskCode:el.taskCode,drawingCode:el.drawingCode,monthPlanType:el.monthPlanType,monthPlanTypeName:el.monthPlanTypeName}
        // })
      });
  }
  getMaterialCost() {
    this._demoThreeService.getMaterialCost(this.yearNum).subscribe((result) => {
      this.materialCostDto = result;
      this.arrWarehousing = this.materialCostDto.totalWarehousingPrice;
      this.arrInventory = this.materialCostDto.totalInventoryPrice;
      this.arrDelivery = this.materialCostDto.totalDeliveryPrice;
      this.totalWarehousing = this.materialCostDto.warehousingPrice;
      this.totalDelivery = this.materialCostDto.deliveryPrice;
      this.totalInventory = this.materialCostDto.inventoryPrice;
      this.righttoptab();
      this.righttop(1);
    });
  }
  righttop(type: number) {
    // 基于准备好的dom，初始化echarts实例
    var data;
    if (type == 1) {
      data = {
        uploadData: this.arrWarehousing,
        //  [
        //   { count: 630 },
        //   { count: 986 },
        //   { count: 792 },
        //   { count: 642 },
        //   { count: 521 },
        //   { count: 573 },
        //   { count: 832 },
        //   { count: 747 },
        //   { count: 983 },
        //   { count: 836 },
        //   { count: 831 },
        //   { count: 633 },
        // ]
        updateData: this.arrDelivery,
        // [
        //   { count: 110 },
        //   { count: 181 },
        //   { count: 123 },
        //   { count: 197 },
        //   { count: 123 },
        //   { count: 173 },
        //   { count: 123 },
        //   { count: 151 },
        //   { count: 101 },
        //   { count: 152 },
        //   { count: 101 },
        //   { count: 177 },
        // ]
        viewData: this.arrInventory,
        // [
        //   { count: 651 },
        //   { count: 842 },
        //   { count: 223 },
        //   { count: 223 },
        //   { count: 221 },
        //   { count: 812 },
        //   { count: 928 },
        //   { count: 219 },
        //   { count: 613 },
        //   { count: 254 },
        //   { count: 981 },
        //   { count: 301 },
        // ]
      };
      var Tpl1 =
        "<li style='width: 30%;font-size: 0;display: inline-table;border-right: solid 1px #1f4191;'>" +
        '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
        this.totalWarehousing +
        "</p>" +
        '<span style="color: #1bb9f9;font-size: 0.5vw;">入库总价</span>' +
        "</li>" +
        "<li style='width: 30%;font-size: 0;display: inline-table;border-right: solid 1px #1f4191;'>" +
        '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
        this.totalDelivery +
        "</p>" +
        '<span style="color: #1bb9f9;font-size: 0.5vw;">出库总价</span>' +
        "</li>" +
        "<li style='width: 30%;font-size: 0;display: inline-table;border-right: 0;'>" +
        '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
        this.totalInventory +
        "</p>" +
        '<span style="color: #1bb9f9;font-size: 0.5vw;">库存总价</span>' +
        "</li>";
      $(".com-screen-content .use-data").html(Tpl1);
    } else if (type == 2) {
      data = {
        uploadData: this.arrWarehousing,
        updateData: this.arrDelivery,
        viewData: this.arrInventory,
      };
      // data = {

      //   uploadData: [
      //     { count: 1300 },
      //     { count: 1686 },
      //     { count: 1692 },
      //     { count: 1742 },
      //     { count: 1621 },
      //     { count: 773 },
      //     { count: 832 },
      //     { count: 1047 },
      //     { count: 1483 },
      //     { count: 1336 },
      //     { count: 831 },
      //     { count: 973 },
      //   ],
      //   updateData: [
      //     { count: 103 },
      //     { count: 281 },
      //     { count: 203 },
      //     { count: 197 },
      //     { count: 173 },
      //     { count: 154 },
      //     { count: 223 },
      //     { count: 251 },
      //     { count: 201 },
      //     { count: 252 },
      //     { count: 201 },
      //     { count: 277 },
      //   ],
      //   viewData: [
      //     { count: 651 },
      //     { count: 842 },
      //     { count: 223 },
      //     { count: 223 },
      //     { count: 221 },
      //     { count: 812 },
      //     { count: 928 },
      //     { count: 219 },
      //     { count: 613 },
      //     { count: 254 },
      //     { count: 981 },
      //     { count: 301 },
      //   ],
      // };
    } else if (type == 3) {
      data = {
        uploadData: this.arrWarehousing,
        updateData: this.arrDelivery,
        viewData: this.arrInventory,
      };
      // data = {
      //   uploadData: [
      //     { count: 330 },
      //     { count: 786 },
      //     { count: 492 },
      //     { count: 842 },
      //     { count: 421 },
      //     { count: 673 },
      //     { count: 932 },
      //     { count: 447 },
      //     { count: 583 },
      //     { count: 436 },
      //     { count: 331 },
      //     { count: 433 },
      //   ],
      //   updateData: [
      //     { count: 10 },
      //     { count: 81 },
      //     { count: 23 },
      //     { count: 97 },
      //     { count: 23 },
      //     { count: 73 },
      //     { count: 23 },
      //     { count: 51 },
      //     { count: 1 },
      //     { count: 52 },
      //     { count: 1 },
      //     { count: 77 },
      //   ],
      //   viewData: [
      //     { count: 451 },
      //     { count: 342 },
      //     { count: 523 },
      //     { count: 323 },
      //     { count: 421 },
      //     { count: 812 },
      //     { count: 728 },
      //     { count: 619 },
      //     { count: 613 },
      //     { count: 554 },
      //     { count: 481 },
      //     { count: 301 },
      //   ],
      // };
    }

    var uploadCnt = [];
    var updateCnt = [];

    var viewCnt = [];
    if (data.uploadData != null) {
      for (var i = 0; i < data.uploadData.length; i++) {
        uploadCnt.push(data.uploadData[i].count);
      }
    }
    if (data.updateData != null) {
      for (var i = 0; i < data.updateData.length; i++) {
        updateCnt.push(data.updateData[i].count);
      }
    }

    if (data.viewData != null) {
      for (var i = 0; i < data.viewData.length; i++) {
        viewCnt.push(data.viewData[i].count);
      }
    }
    var option = {
      tooltip: {
        trigger: "axis",
        formatter: function (params, ticket, callback) {
          var res = "";
          for (var i = 0, l = params.length; i < l; i++) {
            res += "" + params[i].seriesName + " : " + params[i].value + "<br>";
          }
          return res;
        },
        transitionDuration: 0,
        backgroundColor: "rgba(83,93,105,0.8)",
        borderColor: "#535b69",
        borderRadius: 8,
        borderWidth: 2,
        padding: [5, 10],
        axisPointer: {
          type: "line",
          lineStyle: {
            type: "dashed",
            color: "#ffff00",
          },
        },
      },
      legend: {
        icon: "circle",
        itemWidth: 8,
        itemHeight: 8,
        itemGap: 10,

        right: "10",
        data: ["入库总价", "出库总价", "库存总价"],
        textStyle: {
          fontSize: 10,
          color: "#a0a8b9",
        },
      },
      grid: {
        top: "20",
        left: "5%",
        right: "10",
        //bottom: '10%',
        containLabel: false,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            interval: 0,
            fontSize: 12,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#a0a8b9",
            },
          },
          axisTick: {
            show: false,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          offset: 10,
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#a0a8b9",
            },
          },
          axisLabel: {
            margin: 3,
            textStyle: {
              fontSize: 12,
            },
          },
          splitLine: {
            lineStyle: {
              color: "#2b3646",
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "入库总价",
          type: "line",
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(137, 189, 27, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(137, 189, 27, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: {
            normal: {
              color: "#1cc840",
            },
          },
          data: uploadCnt,
        },
        {
          name: "出库总价",
          type: "line",
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(219, 50, 51, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(219, 50, 51, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: {
            normal: {
              color: "#eb5690",
            },
          },
          data: viewCnt,
        },
        {
          name: "库存总价",
          type: "line",
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(0, 136, 212, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(0, 136, 212, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: {
            normal: {
              color: "#43bbfb",
            },
          },
          data: updateCnt,
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("char1"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });

    // setInterval(function () {
    //   myChart.clear();
    //   myChart.setOption(option);
    // }, 9000);
  }
  righttoptab() {
    var resourceDataType = $(".data-label li.active").data("type"); //用于切换基础库
    var Tpl1 =
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: solid 1px #1f4191;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalWarehousing +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">入库总价</span>' +
      "</li>" +
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: solid 1px #1f4191;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalDelivery +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">出库总价</span>' +
      "</li>" +
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: 0;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalInventory +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">库存总价</span>' +
      "</li>";
    var Tpl2 =
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: solid 1px #1f4191;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalWarehousing +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">入库总价</span>' +
      "</li>" +
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: solid 1px #1f4191;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalDelivery +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">出库总价</span>' +
      "</li>" +
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: 0;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalInventory +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">库存总价</span>' +
      "</li>";
    var Tpl3 =
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: solid 1px #1f4191;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalWarehousing +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">入库总价</span>' +
      "</li>" +
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: solid 1px #1f4191;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalDelivery +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">出库总价</span>' +
      "</li>" +
      "<li style='width: 30%;font-size: 0;display: inline-table;border-right: 0;'>" +
      '<p style="color: #fff;font-family: myFirstFont;height: 1%;font-size: 0.5vw;margin-bottom: 0rem;font-weight: 600;">' +
      this.totalInventory +
      "</p>" +
      '<span style="color: #1bb9f9;font-size: 0.5vw;">库存总价</span>' +
      "</li>";
    if (resourceDataType == 1) {
      this.righttop(1);
      $(".com-screen-content .use-data").html(Tpl1);
    } else if (resourceDataType == 2) {
      this.righttop(2);
      $(".com-screen-content .use-data").html(Tpl2);
    } else if (resourceDataType == 3) {
      this.righttop(3);
      $(".com-screen-content .use-data").html(Tpl3);
    }
  }
  tabclick() {
    $(".data-label").on("click", "li", function () {
      $(this).addClass("active").siblings().removeClass("active");
      $(".active-data-label").html($(".data-label li.active").html());
    });
    this.righttoptab();
  }
  getTotalRevenue() {
    this._demoThreeService
      .getTotalRevenue(this.yearNum, this.monthNum)
      .subscribe((result) => {
        this.totalRevenue = result;
      });
  }
  rightbottomleft() {
    var option = {
      backgroundColor: "transparent",
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b}: {c} ({d}%)",
      },
      color: [
        "#0035f9",
        "#f36f8a",
        "#ffff43",
        "#25f3e6",
        "#CC6600",
        "#6600CC",
        "#008800",
      ],
      legend: {
        //图例组件，颜色和名字
        top: "15",
        itemGap: 12, //图例每项之间的间隔
        itemWidth: 16,
        itemHeight: 12,

        icon: "rect",
        data: this.modelCode, //["CZ-3", "CZ-3B", "CA-5", "CA-5B", "CA-7", "CA-7A", "DY"],
        textStyle: {
          color: [],
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 12,
        },
      },
      series: [
        {
          name: "工时",
          type: "pie",
          clockwise: false, //饼图的扇区是否是顺时针排布
          minAngle: 20, //最小的扇区角度（0 ~ 360）
          center: ["50%", "50%"], //饼图的中心（圆心）坐标
          radius: [70, 100], //饼图的半径
          avoidLabelOverlap: true, ////是否启用防止标签重叠
          itemStyle: {
            //图形样式
            normal: {
              borderColor: "#1e2239",
              borderWidth: 1.5,
            },
          },

          label: {
            //标签的位置
            normal: {
              show: false,
              position: "inside", //标签的位置
              formatter: "{d}%",
              textStyle: {
                color: "#fff",
              },
            },
            emphasis: {
              show: true,
              textStyle: {
                fontWeight: "bold",
              },
            },
          },
          data: this.modelTime,
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("chart_1"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var rightbottomleftClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(rightbottomleftClear);
  }
  // 没
  rightbottomright() {
    var data = {
      timeStepAnalysis: {
        channelTime: ["55", "15.80", "46.38", "51.46", "14.51", "44.30"],
        categoryArr: ["一组", "二组", "三组", "四组", "五组", "其他"],
        legendArr: ["工装", "工具"],
        provinceTime: ["64", "15.53", "30.09", "21.19", "73.74", "45.76"],
      },
    };
    var option = {
      tooltip: { trigger: "axis" },
      grid: { left: "6%", right: "5%", bottom: "10%" },
      legend: {
        icon: "rect",
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 10,
        data: data.timeStepAnalysis.legendArr,
        left: "10px",
        top: "5%",
        textStyle: { fontSize: 12, color: "#fff" },
      },
      xAxis: [
        {
          type: "category",
          axisLine: { lineStyle: { color: "#57617B" } },
          axisLabel: { interval: 0, textStyle: { color: "#fff" } },
          data: data.timeStepAnalysis.categoryArr,
        },
      ],
      yAxis: [
        {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: { lineStyle: { color: "#57617B" } },
          axisLabel: {
            textStyle: { color: "#fff" },
            formatter: "{value}",
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: ["#25CEF3"],
            },
          },
        },
      ],
      series: [
        {
          name: "工装",
          type: "bar",
          barWidth: 8,
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#009AFD",
                  },
                  {
                    offset: 0.8,
                    color: "#33DAFF",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          data: data.timeStepAnalysis.channelTime,
        },
        {
          name: "工具",
          type: "bar",
          barWidth: 8,
          barGap: 2,
          itemStyle: {
            normal: {
              barBorderRadius: [10, 10, 0, 0],
              color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: "#E57230",
                  },
                  {
                    offset: 0.8,
                    color: "#D8AE22",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
            },
          },
          data: data.timeStepAnalysis.provinceTime,
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("time-step-detial"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var rightbottomrightClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(rightbottomrightClear);
  }

  centerleft() {
    var option = {
      title: {
        text: "收入量组成",
        textStyle: {
          color: "#e9ebee",
        },

        x: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        x: "left",
        //data: ["CZ-5", "CZ-5B", "CZ-7", "CZ-7A", "CZ-3B"],
        textStyle: {
          color: "#e9ebee",
        },
      },
      color: [
        "#1afffd",
        "#2e7cff",
        "#ffcb89",
        "#005ea1",
        "#0ad5ff",
        "#e15828",
        "#75abd0",
        "#afd6dd",
      ],
      calculable: false,
      series: [
        {
          type: "pie",
          radius: "75%",
          center: ["50%", "60%"],
          data: this.arrModel,
          //  [
          //   {
          //     value: 335,
          //     name: "CZ-5",
          //     itemStyle: {
          //       normal: {
          //         color: "#1afffd",
          //       },
          //     },
          //   },
          //   {
          //     value: 310,
          //     name: "CZ-5B",
          //     itemStyle: {
          //       normal: {
          //         color: "#2e7cff",
          //       },
          //     },
          //   },
          //   {
          //     value: 234,
          //     name: "CZ-7",
          //     itemStyle: {
          //       normal: {
          //         color: "#ffcb89",
          //       },
          //     },
          //   },
          //   {
          //     value: 135,
          //     name: "CZ-7A",
          //     itemStyle: {
          //       normal: {
          //         color: "#005ea1",
          //       },
          //     },
          //   },
          //   {
          //     value: 1548,
          //     name: "CZ-3B",
          //     itemStyle: {
          //       normal: {
          //         color: "#0ad5ff",
          //       },
          //     },
          //   },
          // ],
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("allAly01"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var centerleftClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(centerleftClear);
  }
  // 没
  centercenter() {
    var option = {
      title: {
        text: "制造投入量组成",
        textStyle: {
          color: "#e9ebee",
        },

        x: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        x: "left",
        data: [
          "工时",
          "外协",
          "工装",
          "工具",
          "原材料",
          "设备折旧",
          "制造费用",
          "能源",
          "其他",
        ],
        textStyle: {
          color: "#e9ebee",
        },
      },

      calculable: false,
      series: [
        {
          name: "制造投入量组成",
          type: "pie",
          radius: "75%",
          center: ["50%", "60%"],
          data: [
            {
              value: 335,
              name: "工时",
              itemStyle: {
                normal: {
                  color: "#06b8f8",
                },
              },
            },
            {
              value: 310,
              name: "外协",
              itemStyle: {
                normal: {
                  color: "#ff5c58",
                },
              },
            },
            {
              value: 234,
              name: "工装",
              itemStyle: {
                normal: {
                  color: "#ffffb3",
                },
              },
            },
            {
              value: 135,
              name: "工具",
              itemStyle: {
                normal: {
                  color: "#fee581",
                },
              },
            },
            {
              value: 1548,
              name: "原材料",
              itemStyle: {
                normal: {
                  color: "#1afffd",
                },
              },
            },
            {
              value: 135,
              name: "设备折旧",
              itemStyle: {
                normal: {
                  color: "#1ec7f1",
                },
              },
            },
            {
              value: 135,
              name: "制造费用",
              itemStyle: {
                normal: {
                  color: "#e15828",
                },
              },
            },
            {
              value: 135,
              name: "能源",
              itemStyle: {
                normal: {
                  color: "#28a3e1",
                },
              },
            },
            {
              value: 135,
              name: "其他",
              itemStyle: {
                normal: {
                  color: "#72e7d5",
                },
              },
            },
          ],
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("allAly02"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var centercenterClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(centercenterClear);
  }
  // 没
  centerright() {
    var option = {
      title: {
        text: "车间利润组成",
        textStyle: {
          color: "#e9ebee",
        },

        x: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)",
      },
      legend: {
        orient: "vertical",
        x: "left",
        data: ["CZ-5", "CZ-5B", "CZ-7", "CZ-7A", "CZ-3B"],
        textStyle: {
          color: "#e9ebee",
        },
      },

      calculable: false,
      series: [
        {
          name: "销售组成",
          type: "pie",
          radius: "75%",
          center: ["50%", "60%"],
          data: [
            {
              value: 335,
              name: "CZ-5",
              itemStyle: {
                normal: {
                  color: "#06b8f8",
                },
              },
            },
            {
              value: 310,
              name: "CZ-5B",
              itemStyle: {
                normal: {
                  color: "#ff5c58",
                },
              },
            },
            {
              value: 234,
              name: "CZ-7",
              itemStyle: {
                normal: {
                  color: "#ffffb3",
                },
              },
            },
            {
              value: 135,
              name: "CZ-7A",
              itemStyle: {
                normal: {
                  color: "#fee581",
                },
              },
            },
            {
              value: 548,
              name: "CZ-3B",
              itemStyle: {
                normal: {
                  color: "#1afffd",
                },
              },
            },
          ],
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("allAly03"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var centerrightClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(centerrightClear);
  }

  conterbottom() {
    var option = {
      title: {
        text: "营业、利润执行情况",
        textStyle: {
          color: "#e9ebee",
        },
        x: "center",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        orient: "vertical",
        x: "left",
        data: this.legend, //["营业", "利润"],
        textStyle: {
          color: "#e9ebee",
        },
      },

      calculable: false,
      xAxis: [
        {
          type: "category",
          splitLine: { show: false },
          axisLabel: {
            formatter: "{value} ",
            textStyle: {
              color: "#a4a7ab",
              align: "right",
            },
          },
          data: this.month,
          //  [
          //   "1月",
          //   "2月",
          //   "3月",
          //   "4月",
          //   "5月",
          //   "6月",
          //   "7月",
          //   "8月",
          //   "9月",
          //   "10月",
          //   "11月",
          //   "12月",
          // ],
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: { show: false },
          axisLabel: {
            formatter: "{value} ",
            textStyle: {
              color: "#a4a7ab",
              align: "right",
            },
          },
        },
      ],
      grid: {
        borderWidth: 0,
      },
      series: [
        {
          name: "营业",
          type: "bar",
          data: this.operating, //[120, 149, 170, 232, 256, 167, 135, 162, 326, 200, 164, 133],
          itemStyle: {
            normal: {
              color: "#2481ff",
            },
          },
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          name: "利润",
          type: "bar",
          data: this.profit, //[260, 159, 190, 264, 287, 107, 175, 182, 287, 188, 260, 323],
          itemStyle: {
            normal: {
              color: "#ffcb89",
            },
          },

          markPoint: {
            data: [
              {
                name: "最高",
                value: 182.2,
                xAxis: 7,
                yAxis: 183,
                symbolSize: 18,
              },
              { name: "最低", value: 2.3, xAxis: 11, yAxis: 3 },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
      ],
    };

    var myChart = echarts.init(document.getElementById("allAly04"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var conterbottomClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(conterbottomClear);
  }
  leftNews() {
    var c = 0;
    var timer = setInterval(function () {
      c++;
      if (c == 10) {
        $(".myscroll ul").css({ top: "0px" });
        c = 1;
      }
      var t = c * -35;
      $(".myscroll ul")
        .stop()
        .animate({ top: t + "px" }, 5000);
    }, 5000);
    this.clearArr.push(timer);
  }
  leftbottomleft() {
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
          var tar = params[1];
          return tar.name + "<br/>" + tar.seriesName + " : " + tar.value;
        },
      },
      grid: {
        left: "13%",
        top: "3%",
        right: "-2%",
        borderWidth: 0,
      },
      xAxis: [
        {
          type: "category",

          data: this.teamList, //["总计", "一组", "二组", "三组", "四组", "五组"],
          axisLabel: {
            formatter: "{value} ",
            textStyle: {
              color: "#fff",
              align: "right",
            },
          },
          splitLine: { show: false },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            formatter: "{value} ",
            textStyle: {
              color: "#fff",
              align: "right",
            },
          },
          splitLine: { show: false },
        },
      ],
      series: [
        {
          name: "营业收入",
          type: "bar",
          stack: "总量",
          itemStyle: {
            normal: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)",
            },
            emphasis: {
              barBorderColor: "rgba(0,0,0,0)",
              color: "rgba(0,0,0,0)",
            },
          },
          data: this.differ, //[0, 1700, 1400, 1200, 300, 0],
        },
        {
          name: "营业收入",
          type: "bar",
          stack: "总量",
          data: this.income, //[2900, 1200, 300, 200, 900, 300],
          itemStyle: {
            normal: {
              color: "#2481ff",
            },
          },
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("zhanbi02"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var leftbottomleftclear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(leftbottomleftclear);
  }
  leftbottomright() {
    var color = ["#57e7ec"];
    var option = {
      color: color,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {
          console.log(params[0].data); //打印断点，会看到自己想要的后台数据
          var res = "success"; //可以在这个方法中做改变
          return params[0].name + ":" + params[0].data * 100 + "%";
        },
      },

      grid: {
        left: "0%",
        right: "2%",
        bottom: "10%",
        top: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        min: 0,
        max: 1,
        axisLine: {
          //这是x轴文字颜色
          lineStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          lineStyle: {
            color: "#2b3646",
          },
        },
      },
      yAxis: {
        type: "category",
        data: this.modelName, //["CZ-5", "CZ-5B", "CZ-7", "CZ-7A", "CZ-3B", "CZ-8", "DY"],
        axisLine: {
          //这是y轴文字颜色
          lineStyle: {
            color: "#fff",
          },
        },
      },
      series: [
        {
          name: "营业收入",
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight",
            formatter: function (c) {
              return c.data * 100 + "%";
            },
          },
          data: this.modelCount, //[22001, 18221, 19115, 23423, 29009, 33021, 31035],
        },
      ],
    };
    var myChart = echarts.init(document.getElementById("chart3"));
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    var leftbottomrightClear = setInterval(function () {
      myChart.clear();
      myChart.setOption(option);
    }, 300000);
    this.clearArr.push(leftbottomrightClear);
  }
  hiddentop() {
    this.isshow = false;
    $("header-bar").hide();
    $(".m-body").removeClass("m-body");
    $("footer-bar").hide();
  }
  showtop() {
    this.isshow = true;
    $("header-bar").show();
    $(".m-grid--desktop").addClass("m-body");
    $("footer-bar").show();
  }
}
